<template>
  <ElDrawer v-model="visible" direction="rtl" :with-header="false" class="material-insert">
    <div style="font-weight: 900">INSERT</div>

    <ElForm label-width="120px">
      <ElFormItem label="TITLE">
        <ElInput v-model="bankMaterial.title"></ElInput>
      </ElFormItem>
      <ElFormItem label="RATE">
        <ElInputNumber v-model="bankMaterial.rate" :precision="2" :step="0.01"></ElInputNumber>
        <span>%</span>
      </ElFormItem>
      <ElFormItem label="PERIOD">
        <ElInputNumber v-model="bankMaterial.period"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="UNIT">
        <ElSelect v-model="bankMaterial.unit">
          <ElOption label="年" value="year"></ElOption>
          <ElOption label="月" value="month"></ElOption>
          <ElOption label="日" value="day"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElButton @click="insert()" type="primary">SUBMIT</ElButton>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts" setup>
import * as fund from '@/apis/fund'

const visible = ref(false)
const bankMaterial = reactive({
  title: '',
  rate: 1.0,
  period: 1,
  unit: 'year',

  bankCode: null,
  materialCode: null,
  version: 0,
  fundTimes: 0,
  updateTime: null
})
const show = () => {
  visible.value = true
}
defineExpose({
  show
})
const emit = defineEmits(['postInsert'])
const insert = async () => {
  // const res = await axios({
  //   method: 'post',
  //   url: 'http://localhost:9091/bankMaterial/insert',
  //   data: bankMaterial
  // })
  // console.log(res);
  const res = await fund.bankMaterialInsert(bankMaterial)
  ElMessage.success(' insert successfully ' + res.data.materialCode)
  visible.value = false
  emit('postInsert', 1)
}
</script>
<style lang="scss" scoped>
.el-form {
  width: 500px;
  padding: 20px 50px;
  border: 1px rebeccapurple solid;
}
</style>
